<!-- 文字上下循环滚动 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>autoScroll</title>
</head>
<style>
    .parent {
        width: 300px;
        height: 200px;
        margin:400px auto;
        background: #242424;
        overflow-y: scroll;
    }
    /*设置的子盒子高度大于父盒子，产生溢出效果*/
    .child {
        height: auto;
    }
    .child li {
        height: 50px;
        margin: 2px 0;
        background: #009678;
    }
    .parent::-webkit-scrollbar {
    display: none;
    }
</style>
<body>
    <div id="parent" class="parent" onmouseout="Up()" onmouseover="Stop()">
        <div id="child1" class="child">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </div>
        <div id="child2" class="child"></div>
    </div>
    <script type="text/javascript">
        
            var parent = document.getElementById('parent');
            var child1 = document.getElementById('child1');
            var child2 = document.getElementById('child2');
            child2.innerHTML = child1.innerHTML;
            console.log(child1.scrollHeight)
            function ScrollUp() {
               if(parent.scrollTop >= child1.scrollHeight) {
                   parent.scrollTop = 0;
               } else {
                console.log(parent.scrollTop);
                   parent.scrollTop++;
               }
            };
            var i = setInterval("ScrollUp()", 50);
            function Up(){
                i = setInterval("ScrollUp()", 50);
            }
            function Stop(){
                clearInterval(i);
            }

    </script>
</body>
</html>